<template>
     <el-dialog title="支付酬金"
                :data="visible" :visible.sync="visible"
                :show-close="false" width="500px" 
                :modal="true" 
                :close-on-click-modal="false" 
                :close-on-press-escape="false"
                top="50px">
        <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
        <!-- 这里是展示内容 -->
        <el-form label-width="135px">
          <el-form-item label="用户名:">
            <el-input type="textarea" class="article-textarea" :rows="1" readonly="readonly" v-model="propsData.username" style="width: 60%"></el-input>
          </el-form-item>
          <el-form-item label="联系号码:">
            <el-input type="textarea" class="article-textarea" :rows="1" readonly="readonly" v-model="propsData.mobile" style="width: 60%"></el-input>
          </el-form-item>
          <el-form-item label="支付酬金:">
            <el-input type="textarea" class="article-textarea" :rows="1" readonly="readonly" v-model="propsData.amount" style="width: 60%;font-size:18px"></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 40px;" label="支付二维码:">
            <span><img :src="propsData.qr_code" style="width:200px;height:200px"></span>
          </el-form-item>
          <!-- 这里是操作 -->
          <el-form-item>
            <el-button type="success" :loading="loading" @click="submitForm">确认结算</el-button>
            <el-button @click.stop="cancelModal">返回</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
</template>

<script>
import * as api from '@/api/main-api' // API

export default {
  name: 'withrawPay',

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    propsData: Object
  },

  data() {
    return {
      loading: false
    }
  },

  methods: {
    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      // 需要请求取消锁定行
      var postData = {
        account_id: this.propsData.id,
        admin_id: this.propsData.admin_id,
        iscancel: 2
      }
      this.lockAccount(postData)
      this.$emit('update:visible', false)
    },

    // 锁行操作
    lockAccount(datas) {
      api.lockAccountApi(datas).then(response => {
        if (response.data.code === 0) {
          this.$root.message('提现已被取消锁定', 'success')
        }
      })
    },

    // 表单提交
    submitForm() {
      // 数据赋值
      var postData = {
        account_id: this.propsData.id,
        admin_id: this.propsData.admin_id,
        unit_id: this.propsData.unit_id,
        status: 1
      }
      // 数据开始提交
      this.loading = true
      if (this.propsData) {
        this.postDataUrl(postData)
      }
    },

    // 管理员提交数据 20180831
    postDataUrl(data) {
      api.withdrawPayApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    }
  }
}
</script>